<script setup>

</script>

<template>
<section>
  <div class="max-w-6xl mx-auto py-12 px-8">
    <!-- 标题 -->
    <h1 class="text-[#5F5F5F] text-8 tracking-normal leading-14 font-bold text-center mb-8">Available Surface Finishes</h1>

    <!-- 内容布局 -->
    <div class="flex flex-col lg:flex-row items-center">
      <!-- 左侧列表 -->
      <div class="lg:w-2/3 grid grid-cols-2 gap-4">
        <ul class="list-disc pl-6 space-y-2 text-[#272626] text-4 tracking-normal leading-6">
          <li>As Molded</li>
          <li>SPI Finishes</li>
          <li>Polishing</li>
          <li>Silk Screening</li>
          <li>Pad Printing</li>
        </ul>
        <ul class="list-disc pl-6 space-y-2 text-[#272626] text-4 tracking-normal leading-6">
          <li>Glossy</li>
          <li>Matte</li>
          <li>Painting</li>
          <li>Etching</li>
          <li>Laser Engraving</li>
          <li>Custom Finishing</li>
        </ul>
      </div>

      <!-- 右侧图片 -->
      <div class="lg:w-1/3 mt-8 lg:mt-0 lg:ml-8">
        <img
            src="/src/images/services/injection-molding/Available-Surface-Finishes.webp"
            alt="Surface Finish Example"
            class="w-full h-auto"
        />
      </div>
    </div>
  </div>
</section>
</template>

<style scoped>

</style>